<template>
  <div class="page-component">
    <nav-bar></nav-bar>
    <h2>我的壁纸</h2>

    <div class="category-tabs">
      <button
        v-for="category in categories"
        :key="category"
        :class="{ active: selectedCategory === category }"
        @click="selectCategory(category)"
      >
        {{ category }}
      </button>
    </div>

    <div class="image-list" v-if="selectedCategory==='我的收藏'" >
      <!-- <div v-for="image in filteredImages"  class="image-item"> -->
        <div v-for="image in likeWallPapers"  class="image-item">
        <img
          :src="image.url"
          alt="Favorite Image"
          class="image-item__image"
          @mouseover="showImageInfo = image"
          @mouseleave="showImageInfo = null"
          @click="showImageDetail(image)"
        >
        <div class="image-item__info" v-if="showImageInfo === image">
          <!-- <p>ID: {{ image.id }}</p> -->
          <p>Label: {{ image.name }}</p>
          <!-- 显示其他图片信息 -->
        </div>
      </div>
    </div>

    <div class="image-list" v-if="selectedCategory==='我的上传'" >
      <div v-for="image in upWallPapers"  class="image-item">
        <img
          :src="image.url"
          alt="Favorite Image"
          class="image-item__image"
          @mouseover="showImageInfo = image"
          @mouseleave="showImageInfo = null"
          @click="showImageDetail(image)"
        >
        <div class="image-item__info" v-if="showImageInfo === image">
          <!-- <p>ID: {{ image.id }}</p> -->
          <p>Label: {{ image.name }}</p>
          <!-- 显示其他图片信息 -->
        </div>
      </div>
    </div>

    
    <div class="image-list" v-if="selectedCategory==='我的下载'" >
      <!-- <button @click="clearDownload"></button> -->
      <div v-for="image in filterDownloadimages"  class="image-item">
        <img
          :src="image.url"
          alt="Favorite Image"
          class="image-item__image"
          @mouseover="showImageInfo = image"
          @mouseleave="showImageInfo = null"
          @click="showImageDetail(image)"
        >
        <div class="image-item__info" v-if="showImageInfo === image">
          <!-- <p>ID: {{ image.id }}</p> -->
          <p>Label: {{ image.name }}</p>
          <!-- 显示其他图片信息 -->
        </div>
      </div>
    </div>

    <div class="image-detail" v-if="showDetail">
      <div class="image-detail__content">
        <img :src="selectedImage.url" alt="Selected Image">
        <div class="image-detail__info">
          <!-- <p>ID: {{ selectedImage.id }}</p> -->
          <p>Label: {{ selectedImage.name }}</p>
          <!-- 显示其他详细信息 -->
        </div>
        <button @click="closeImageDetail">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import NavBar from './Page/NavBar.vue';
import axios from 'axios';
// import OneImage from './Page/image';
import Image from './Page/image';

export default {
  components: {
    NavBar,Image
  },
  data() {
    return {
      categories: ['我的下载', '我的收藏', '我的上传'],
      selectedCategory: '我的下载',
      showImageInfo: null,
      showDetail: false,
      selectedImage: null,
    };
  },
  computed: {
    ...mapGetters(['getDownloadImages']),
    filteredImages() {
      return this.getFavoriteImages;
    },
    filterDownloadimages(){
      console.log('哈哈哈哈哈哈哈操'+this.getDownloadImages)
      return this.getDownloadImages;
    },
    upWallPapers() {
      var nowid = localStorage.getItem('userId');//根据登录者的id
      console.log(this.getUpWallPaper(nowid))
      return this.getUpWallPaper(nowid);
    },
    likeWallPapers(){
      console.log(this.getlikeWallPaper(1));
      return this.getlikeWallPaper(1);
    }
    // getUpWallPaper(userId){
    //   const result = [];
    //   axios.get('https://localhost:7293/api/Wallpapers')
    //   .then(response => {
    //     const images = response.data;
    //     images.forEach((imageData,index) => {
    //       const image = new Image(index+1,imageData.wUrl,this.changetagtochina(imageData.wCate))
    //       if(imageData.userId == userId)
    //       result.push(image)
    //     });
    //   })
    //   return result;
    // }
  },
  methods: {
    selectCategory(category) {
      this.selectedCategory = category;
      console.log(this.selectedCategory)
    },
    clearDownload(){
      console.log('老子执行了');
      this.$store.dispatch('clearDownload');
    },
    showImageDetail(image) {
      this.showDetail = true;
      this.selectedImage = image;
    },
    closeImageDetail() {
      this.showDetail = false;
      this.selectedImage = null;
    },
    changetagtochina(originname){
        if(originname == 'scene'){
          return '风景'
        }
        else if(originname == 'erciyuan'){
          return '二次元'
        }
        else if(originname == 'technology'){
          return '科幻'
        }
        else{
          return '其它'
        }
      },
      getUpWallPaper(userId) {
      const result = [];
      axios.get('https://localhost:7293/api/Wallpapers')
        .then(response => {
          const images = response.data;
          console.log('responsedata是这样的：：',images);
          images.forEach((imageData, index) => {
            const image = new Image(index + 1, imageData.wUrl, this.changetagtochina(imageData.wCate));
            if (imageData.userId === userId) {//根据id获取其上传过的壁纸
              result.push(image);
            }
          });
        })
        .catch(error => {
          console.error(error);
        });
      console.log('result是：',result)
      return result;
    },
    getlikeWallPaper(userId){
      const result = [];
      var storedUserId = localStorage.getItem('userId');
      axios.get(`https://localhost:7293/api/Users/${storedUserId}`)
      .then(response => {
        const imagesInfo = response.data.userLikes;
        imagesInfo.forEach((imageData,index) => {
          axios.get(`https://localhost:7293/api/Wallpapers/${imageData.wallpaperId}`)
          .then(
            response => {
              const imageData = response.data;
              console.log('这里的image是'+imageData)
              const image = new Image(index+1, imageData.wUrl,this.changetagtochina(imageData.wCate));
              result.push(image)
            }
          )
        })
      })
      return result;
    }
  },
};
</script>

<style>
.page-component {
  width: 100%;
  height: 100%;
}

.category-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.category-tabs button {
  padding: 10px 20px;
  margin: 0 10px;
  background-color: #f2f2f2;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.category-tabs button.active {
  background-color: #ccc;
}

.image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
}

.image-item__image {
  width: 100%;
  height: auto;
  cursor: pointer;
}

.image-item__info {
  background-color: #f2f2f2;
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
}

.image-detail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.image-detail__content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-detail__info {
  margin-top: 10px;
}

.image-detail__info p {
  margin: 5px 0;
}

.image-detail__info p:first-child {
  font-weight: bold;
}

.image-detail__content img {
  width: 400px;
  height: auto;
  margin-bottom: 10px;
}

.image-detail__content button {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #f2f2f2;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.image-detail__content button:hover {
  background-color: #ccc;
}
</style>
